<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <meta charset="utf-8">
    <title>浏览文件系统</title>
    <link rel="stylesheet" type="text/css" href="/cykspark/file/css/bootstrap.min.css"/>
    <!-- webuploader上传插件css -->
    <link rel="stylesheet" href="/cykspark/file/css/webuploader/style.css">
    <link rel="stylesheet" href="/cykspark/file/css/webuploader/webuploader.css">
    <!--表格效果-->
    <link rel="stylesheet" href="/cykspark/plugin/table/css/normalize.css">
    <link rel="stylesheet" href="/cykspark/plugin/table/css/demo.css">
    <link rel="stylesheet" href="/cykspark/plugin/table/css/component.css">
    <!--导航栏特效CSS-->
    <link rel="stylesheet" href="/cykspark/plugin/navbar/css/navbar.css">
    <!--删除下载等button-->
    <link rel="stylesheet" href=" http://www.bootcss.com/p/buttons/css/buttons.css">
    <!--集群darkSelectCSS-->
     <link rel="stylesheet" type="text/css" href="/cykspark/plugin/darkSelect/css/darkSelect.css" />
    <!--box-button特效CSS！必须放在所有css后面-->
    <link rel="stylesheet" href="/cykspark/plugin/button/css/button.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!--<script src="/cykspark/file/js/deleteDialog/jquery-3.1.1.min.js"></script>-->
    <!--cookies-->
    <script src="/cykspark/common/js/cookies-operation.js"></script>
    <script src="/cykspark/file/js/file.js"></script>
    <!--jsTree-->
    <script src="https://cdn.bootcss.com/jstree/3.3.4/jstree.min.js"></script>
    <link href="https://cdn.bootcss.com/jstree/3.3.4/themes/default/style.min.css" rel="stylesheet"/>
    <script src="/cykspark/file/js/jsTree/hadoop-online.js"></script>
    <!-- 删除时确认窗口 -->
    <script src="/cykspark/file/js/deleteDialog/bootbox.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!--分页-->
    <script src="/cykspark/file/js/paging/jquery-paging.js"></script>
    <!--导航栏特效JS-->
    <script src="/cykspark/plugin/navbar/js/navbar.js"></script>

    <style>
        .center{
            text-align: center;
        }
    </style>
</head>
<body onload="showFileList()">
<div class="container">
    <!--导航栏-->
    <div id="menu2" class="menu">
        <ul>
            <li><a href="/cykspark/app/app_list.html">首　　页</a></li>
            <li><a href="/cykspark/file/file_list.html">文件管理</a></li>
            <li><a href="/cykspark/data/data_show.html">数据展示</a></li>
            <li><a href="/cykspark/cluster/cluster_list.html">集群管理</a></li>
        </ul>
        <div class="cls"></div>
    </div>

    <!--button-->
    <div class="box">
        <div class="link mission-link">
            <a class="box-button" style="cursor: pointer" data-toggle="modal" data-target="#myCluster">
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                集群选择
            </a>
        </div>
        <div class="link play-link" >
            <a class="box-button" id="uploadBtn" onclick="loadJsTree()" style="cursor: pointer" data-toggle="modal" >
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                上传文件
            </a>
        </div>
    </div>

    <!--表格-->
    <div class="col-md-9 column" style="width: 100%;margin: 0 auto">
        <table class="table">
            <thead>
            <tr>
                <th class="center" style="width:50px;">序号</th>
                <th class="center">文件名称</th>
                <th class="center">文件大小</th>
                <th class="center">更新时间</th>
                <th class="center">备注</th>
                <th class="center">操作</th>
            </tr>
            </thead>
            <tbody id="file_tbody">
            </tbody>
        </table>

        <!--分页跳转-->
        <div style="margin-left: 30%">
            <div class="search-pager" id="backward-paper"></div>
        </div>
    </div>
</div>

<!-- 模态框（myModal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    上传文件
                </h4>
            </div>
            <div class="modal-body">

                <!--上传插件-->
                <div id="wrapper">
                    <div id="uploader">
                        <div class="queueList">
                            <div id="dndArea" class="placeholder">
                                <div id="filePicker"></div>
                                <p>或将文件拖到这里</p>
                            </div>
                        </div>
                        <div class="statusBar" style="display:none;">
                            <div class="progress">
                                <span class="text">0%</span>
                                <span class="percentage"></span>
                            </div>
                            <div class="info"></div>
                            <div class="btns">
                                <div id="filePicker2"></div>
                                <div class="uploadBtn">开始上传</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--上传插件-->
            </div>
        </div><!-- /.myModal-content -->
    </div><!-- /.myModal -->
</div>
<!-- 模态框（hadoopModal） -->
<div class="modal fade" id="hadoopModal" tabindex="-1" role="dialog" aria-labelledby="hadoopModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="hadoopModalLabel">
                    上传路径选择
                </h4>
            </div>
            <div class="modal-body" style="background: #333">
                    <div class="input-group" style="padding-bottom: 20px">
                        <span class="input-group-addon skyBlue">上传路径:</span>
                        <input type="text" class="form-control" id="hdfsInput" readonly placeholder="路径"/>
                        <span id="pathBtn" class="input-group-addon skyBlue" style="cursor: pointer" data-toggle="modal" data-target="#myModal">确定</span>
                    </div>
                    <form id="file-search">
                    <div class="input-group" >
                        <span class="input-group-addon skyBlue">文件搜索:</span>
                        <input type="text" class="form-control" id="file-search-input"  placeholder="文件搜索"/>
                        <span type="submit" class="input-group-addon skyBlue">搜索</span>
                    </div>
                    </form>
                    <div id="jsTreeDemo"></div>
                </div>
        </div><!-- /.hadoopModal-content -->
    </div><!-- /.hadoopModal -->
</div>
<!-- 模态框（myClusterModal） -->
<div class="modal fade" id="myCluster" tabindex="-1" role="dialog" aria-labelledby="myClusterModalLabel"
     aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    集群选择
                </h4>
            </div>
            <div class="modal-body" style="background: #333">
                <div id="myDiv">
                    <select id="selector"  class="select-target select-theme-dark"></select>
                </div>
            </div>
        </div><!-- /.myClusterModal-content -->
    </div><!-- /.myClusterModal -->
</div>


<!--集群选择下拉框实现的js-->
<script src="/cykspark/file/js/selectCluster/selectCluster.js"></script>
<!-- webuploader上传插件js -->
<script src="/cykspark/file/js/webuploader/upload.js"></script>
<script src="/cykspark/file/js/webuploader/webuploader.js"></script>

</body>
</html>